<template>
  <div class="music">
    <h1>{{ musicHeading }}.</h1>
		<h3>{{ heading }}</h3>
		<button @click="reversedHeading">反转标题</button>
    <ul v-if="artists.length > 0">
      <li
        v-for="item of artists"
        :key="item.id"
      >
        <router-link :to="{ name: 'Detail', params: { singer_id: item.id } }">
					<!-- <img :src="item.picUrl" alt=""> -->
					<p>{{ item.name }}</p>
				</router-link>
      </li>
    </ul>
    <p v-else>暂无数据</p>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex"

export default {
  name: "Music",
  data() {
    return {
    }
  },
	computed: {
		...mapState("music", ["musicHeading", "artists"]),
		...mapGetters("music", { heading: "reversedMH3" }),
		// 
	},
  created() {
		// 
    this.$store.dispatch("music/getArtistList").then(res=> {
			console.log(res)
		}).catch(e => {
			console.log(e)
		})
  },
	methods: {
		...mapMutations("music", ["SET_MUSIC_HEADING", "SET_ARTISTS"]),
		reversedHeading() {
			// this.$store.dispatch("updateMHeading")
			this.$store.dispatch("music/updateMHeading", {
				data: "updated music"
			})
			// commit提交Mutation -> dispatch触发Action
			// this.SET_MUSIC_HEADING("修改后的标题")
			// this.$store.commit("SET_MUSIC_HEADING")
			// this.$store.commit("SET_MUSIC_HEADING", "修改后的标题")
		}
	}
}
</script>

<!-- index.less -->
<!-- index.scss -->
<!-- index.sass -->
<!-- css预处理器  postcss -->
<style scoped lang="less">
@size: 120px;
@bg: #f0f;

.border {
  border: 2px solid #42b983;
}

.music {
  ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;

    //li:hover{}

    li {
      .border();
      width: 200px;
      background-color: @bg;

      &:hover {
        background-color: #42b983;
      }

      img {
        width: @size;
        height: @size;
        object-fit: cover;
      }
    }
  }
}

/*.music ul li {
  width: 200px;
}
.music ul li img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}
*/
</style>
